<template>
  <van-tabbar v-model="barActive" z-index="10">
      <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/category" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item replace to="/cart" icon="cart-o">购物车</van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="user-o">我的</van-tabbar-item>
  </van-tabbar>
</template>
    
<script setup lang='ts'>
import { ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
  let barActive = ref<any>(0)
  let route = useRoute()
  watchEffect(() => {
    switch (route.path) {
      case "/":
        barActive.value = 0
        break;
      case "/category":
        barActive.value = 1
        break;
      case "/cart":
        barActive.value = 2
        break;
      case "/my":
        barActive.value = 3
        break;
      default:
        barActive.value = null
    }
  })
</script>
    
<style>
    
</style>